<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
        media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .layui-table-cell img{
      text-align: center;
      height: auto;
      width: auto;
      white-space: normal;
      max-height: 25px;
      max-width: 30px;
      border: 1px solid salmon;
    }
    .layui-upload img{
      max-height: 50px;
      max-width: 50px;
    }
    .uploader-list {
      margin-left: -15px;
    }

    .uploader-list .info {
      position: relative;
      margin-top: -25px;
      background-color: black;
      color: white;
      filter: alpha(Opacity=80);
      -moz-opacity: 0.5;
      opacity: 0.5;
      width: 100px;
      height: 25px;
      text-align: center;
      display: none;
    }

    .uploader-list .handle {
      position: relative;
      background-color: black;
      color: white;
      filter: alpha(Opacity=80);
      -moz-opacity: 0.5;
      opacity: 0.5;
      width: 100px;
      text-align: right;
      height: 18px;
      margin-bottom: -18px;
      display: none;
    }

    .uploader-list .handle i {
      margin-right: 5px;
    }

    .uploader-list .handle i:hover {
      cursor: pointer;
    }

    .uploader-list .file-iteme {
      margin: 12px 0 0 15px;
      padding: 1px;
      float: left;
    }
  </style>

</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索商品信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label  class="layui-form-label">关键词</label>
              <div class="layui-input-inline">
                <input id="keyword" type="text" name="username" autocomplete="off"
                       class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <label  class="layui-form-label">商品状态</label>
              <div class="layui-input-inline">
                <select id="waresStatus" name="waresStatus">
                  <option value="1">已上架</option>
                  <option value="2">未上架</option>
                  <option value="3">已下架</option>
                </select>
              </div>
            </div>


            <div class="layui-inline">
              <button id="serachBtn" type="button"
                      class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn">
                <i class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="addBtn"> 增商品 </button>
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="upShelf" > 上架 </button>
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="downShelf" > 下架 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
      </div>
    </script>


    <table class="layui-hide" id="currentTableId"
           lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="attachment">附件管理</a>
    </script>


    <!-- 定义附件管理时弹出窗口的模板 -->
    <script type="text/html" id="attachmentForm">
    <from class="layui-form" lay-filter="attachmentForm" >

      <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
          预览图：
          <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
          </div>
        </blockquote>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button id="savePicBtn" type="button" class="layui-btn">确定</button>
        </div>
      </div>

    </from>
    </script>

    <!-- 定义新增时弹出窗口的模板 -->
    <script type="text/html" id="waresForm">

      <form class="layui-form" lay-filter="waresForm">

        <div class="layui-form-item">
          <label class="layui-form-label">商品名称</label>
          <div class="layui-input-inline">
            <input id="id" type="hidden"  name="id" >
            <input id="waresName" type="text" name="waresName" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
          </div>
          <label class="layui-form-label">一级分类</label>
          <div class="layui-input-inline">
            <div class=layui-input-inline>
              <select id="firstSelect" lay-filter="topWares" name="firstSelect"></select>
            </div>
          </div>
          <label class="layui-form-label">二级分类</label>
          <div class="layui-input-inline">
            <div class=layui-input-inline>
              <select id="secondSelect" lay-filter="secondWares" name="secondSelect"></select>
            </div>
          </div>
        </div>

        <div class="layui-form-item">

          <label class="layui-form-label">商品原价</label>
          <div class="layui-input-inline">
            <div class="layui-input-inline">
              <input id="prePrice" type="text" name="prePrice" class="layui-input demo-phone" >
            </div>
          </div>

          <label class="layui-form-label">优惠力度</label>
          <div class="layui-input-inline">
            <input id="breaks" type="text" name="breaks" autocomplete="off"  class="layui-input" >
          </div>



          <label class="layui-form-label">商品现价</label>
          <div class="layui-input-inline">
            <input id="price" type="text" name="price" autocomplete="off"  class="layui-input" disabled>
          </div>

        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">商品单位</label>
          <div class="layui-input-inline">
            <input id="unit" type="text" name="unit" autocomplete="off"  class="layui-input">
          </div>

          <label class="layui-form-label">商品星级</label>
          <div class="layui-input-inline">
            <select name="starNumber">
              <option value="5">5</option>
              <option value="4">4</option>
              <option value="3">3</option>
              <option value="2">2</option>
              <option value="1">1</option>
            </select>
          </div>

          <label class="layui-form-label">商品颜色</label>
          <div class="layui-input-inline">
            <input id="color" type="text" name="color" autocomplete="off"  class="layui-input"  placeholder="多颜色间用逗号隔开">
          </div>

        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">商品版本</label>
          <div class="layui-input-inline">
            <input id="version" type="text" name="version" autocomplete="off"  class="layui-input" placeholder="多版本间用逗号隔开">
          </div>

          <label class="layui-form-label">商品尺码</label>
          <div class="layui-input-inline">
            <select name="size">
              <option>请选择尺码</option>
              <option value="M">M</option>
              <option value="L">L</option>
              <option value="XL">XL</option>
              <option value="XXL">XXL</option>
            </select>
          </div>

          <label class="layui-form-label">商品厂家</label>
          <div class="layui-input-inline">
            <input id="supply" type="text" name="supply" autocomplete="off"  class="layui-input">
          </div>

        </div>

        <div class="layui-form-item">

          <label class="layui-form-label">商品类型</label>
          <div class="layui-input-inline">
            <input id="waresType" type="text" name="waresType" autocomplete="off"  class="layui-input">
          </div>

          <label class="layui-form-label">商品标签</label>
          <div class="layui-input-inline">
            <input id="labels" type="text" name="labels" autocomplete="off"  class="layui-input">
          </div>

          <label class="layui-form-label">商品描述</label>
          <div class="layui-input-inline">
            <input id="description" type="text" name="description" autocomplete="off"  class="layui-input">
          </div>

        </div>


        <div class="layui-form-item">

          <label class="layui-form-label">额外信息</label>
          <div class="layui-input-inline">
            <input id="addInfo" type="text" name="addInfo" autocomplete="off"  class="layui-input">
          </div>

          <label class="layui-form-label">商品特色</label>
          <div class="layui-input-inline">
            <input id="feature" type="text" name="feature" autocomplete="off"  class="layui-input">
          </div>

          <label class="layui-form-label">支持快递</label>
          <div class="layui-input-inline">
            <input id="deliveryType" type="text" name="deliveryType" autocomplete="off"  class="layui-input">
          </div>

        </div>

        <div class="layui-form-item">

          <label class="layui-form-label">商品库存</label>
          <div class="layui-input-inline">
            <input id="store" type="text" name="store" autocomplete="off"  class="layui-input">
          </div>

          <label class="layui-form-label">条形码</label>
          <div class="layui-input-inline">
            <input id="barCode" type="text" name="barCode" autocomplete="off"  class="layui-input">
          </div>

          <label class="layui-form-label">首页图片</label>
          <div class="layui-inline">
            <div class="layui-input-inline">
              <img id="mainPic" width="50px" height="50px" src="">
              <input type="hidden" name="mainPic" id="mainPicAddress">
            </div>
          </div>

        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button id="saveBtn" type="button" class="layui-btn">立即提交</button>
          </div>
        </div>

      </form>
    </script>
  </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
  layui.use([ 'form', 'table', 'layer', 'laydate','upload' ], function() {
    var $ = layui.jquery, form = layui.form, table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    var upload=layui.upload;

    $("#serachBtn").on("click", function() {
      table.render({
        elem : '#currentTableId',
        url : '/wares/list',//请求放在表格中的数据
        where:{
          keyword:$("#keyword").val(),
          waresStatus:$("#waresStatus").val()
        },
        toolbar : '#toolbarDemo',
        defaultToolbar : [ 'filter', 'exports', 'print', {
          title : '提示',
          layEvent : 'LAYTABLE_TIPS',
          icon : 'layui-icon-tips'
        } ],
        cols : [ [ {
          type : "checkbox",
          //width : 50
        }, {
          field : 'id',
          title : 'ID',
          sort : true
        }, {
          field : 'waresName',
          title : '商品名称'
        }, {
          field : 'price',
          title : '价格'
        }, {
          field : 'feature',
          title : '特色'
        }, {
          field : 'mainPic',
          title : '主页图片',
          templet: '<div><img src="{{d.mainPic}}"></div>'
        },{
          field : 'status',
          title : '状态'
        }, {
          field : 'classifyInfo',
          title : '分类信息'
        },{
          title : '操作',
          toolbar : '#currentTableBar',
          align : "center"
        } ] ],
        limits : [ 5,10, 15 ],
        limit : 15,
        page : true,
        skin : 'line'
      });
    }).click();


    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'addBtn') {  // 监听增商品操作
        $.post("/wares/child",{id:0},function (wares){
          layer.open({
            type : 1,
            title : "新增商品",
            area : [ "1000px", "500px" ],
            content : $("#waresForm").html(),
          });
          $.each(wares,function (i,v){
            $("#firstSelect").append('<option value="'+v.id+'">'+v.classifyName+'</option>');
          });

          $(document).ready(function(){

            $("#prePrice").on("input", function(){
              $("#price").val($("#prePrice").val());
            });

            $("#breaks").on("input", function(){
              if ($("#prePrice").val()==null || $("#prePrice").val()=="" ) {
                layer.msg("请先输入原价!")
              }else {
                $("#price").val($(this).val()*$("#prePrice").val());
              }
            });

          });

          //渲染表单
          form.render();
          loadSubWares();
          upload.render({
            elem: '#mainPic' //绑定元素
            ,url: '/wares/mainPic' //上传接口
            ,done: function(res){
              if(res.code==0){
                $("#mainPicAddress").val(res.data.mainPic);
                $("#mainPic").attr("src",res.data.mainPic);
              }
            }
            ,error: function(){
              //请求异常回调
            }
          });
        });
      }else if(obj.event === 'upShelf'){//上架操作
        var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
        var ids=[];
        $.each(data,function (i,v){
          ids[i]=v.id;
        });
        if(ids.length === 0){
          layer.msg("您还未选择任何商品!")
        }else {
          layer.confirm("确认上架这些商品吗？",function () {
            $.post("/wares/upShelf",{ids:ids},function(){
              layer.closeAll();
              layer.msg("商品已成功上架!")
              $("#serachBtn").click();
            });
          });
        }
      }else if(obj.event === 'downShelf'){//下架操作
        var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
        var ids=[];
        $.each(data,function (i,v){
          ids[i]=v.id;
        });
        if(ids.length === 0){
          layer.msg("您还未选择任何商品!")
        }else {
          layer.confirm("确认下架这些商品吗？",function () {
            $.post("/wares/downShelf",{ids:ids},function(){
              layer.closeAll();
              layer.msg("商品已成功下架!")
              $("#serachBtn").click();
            });
          });
        }
      }else if (obj.event === 'delete') {  // 监听删除操作
        var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
        var ids=[];
        $.each(data,function (i,v){
          ids[i]=v.id;
        });
        if(ids.length === 0){
          layer.msg("您还未选择任何商品!")
        }else{
          layer.confirm("确认删除这些商品信息吗？",function () {
            $.post("/wares/deleteWares",{ids:ids},function(){
              layer.closeAll();
              layer.msg("删除商品信息成功!")
              $("#serachBtn").click();
            });
          })
        }
      }
    });

    //切换一级分类
    form.on("select(topWares)",function (){
      loadSubWares();
    });

    //根据选中一级分类加载对应的二级分类信息
    var loadSubWares=function (fn){
      $.post("/wares/child",{id:$("#firstSelect").val()},function (secondWares){
        $("#secondSelect").html("");
        $.each(secondWares,function (i,v){
          $("#secondSelect").append('<option value="'+v.id+'">'+v.classifyName+'</option>');
        });
        form.render();
        if(fn!=null){
          fn();
        }
      });
    }


    //保存按钮绑定事件
    $("body").on("click","#saveBtn", function() {
        var data = form.val("waresForm");
        if (data.waresName==null|| data.waresName=="") {
          layer.msg("商品名称不能为空!");
          return false;
        }
        $.post("/wares/save", data, function() {
          layer.closeAll();
          $("#serachBtn").click();
        });
    });


    //给图片添加删除图标
    var deleteIcon=function(res) {
      $.each(res, function(i, v) {
        var imgWrapper = $('<div/>', {
          css: {
            position: 'relative',
            display: 'inline-block'
          },
        });
        var img = $('<img/>', {
          style: "margin: 5px 5px 5px 5px",
          src: v.avatar,
          class: "layui-upload-img",
        });

        var icon = $('<i class="layui-icon layui-icon-delete" style="color: #fff; font-size: 18px; position: absolute; top: 2px; right: 2px;"></i>');

        imgWrapper.hover(
                function() {
                  // 鼠标经过时添加遮罩
                  $(this).append($('<div/>', {
                    css: {
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: '100%',
                      height: '100%',
                      backgroundColor: 'rgba(0, 0, 0, 0.5)',
                      textAlign: 'center'
                    },
                    html: icon
                  }));
                },
                function() {
                  // 鼠标移出时移除遮罩
                  $(this).find('div').remove();
                }
        ).click(function() {
          layer.confirm("确定要删除这张图片吗？", function(index) {
            layer.close(index);
            $.post("/attachment/delete", {id: v.id}, function(res) {
              if (res.code === 0) {
                imgWrapper.remove();
                layer.msg(res.msg);
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            });
          });
        });

        imgWrapper.append(img);

        $('#uploader-list').append(imgWrapper);
      });
    };


    //给操作框绑定事件
    table.on('tool(currentTableFilter)', function(obj) {
      //如果点的时编辑按钮
      if (obj.event === 'edit'){
        $.post("/wares/child",{id:0},function (wares){

          layer.open({
            type : 1,
            title : "修改商品信息",
            area : [ "1000px", "500px"],
            content : $("#waresForm").html()
          });

          $.each(wares,function (i,v){
            $("#firstSelect").append('<option value="'+v.id+'">'+v.classifyName+'</option>');
          });

          $(document).ready(function(){

            $("#prePrice").on("input", function(){
              $("#price").val($("#prePrice").val());
            });

            $("#breaks").on("input", function(){
              if ($("#prePrice").val()==null || $("#prePrice").val()=="" ) {
                layer.msg("请先输入原价!")
              }else {
                $("#price").val($(this).val()*$("#prePrice").val());
              }
            });
          });


          $.post("/wares/selectById?id="+obj.data.id,function(m){

            $("#firstSelect").val(m.data.topWares);

              loadSubWares(function() {
               form.val("waresForm",m.data);
                $("#mainPic").attr("src", m.data.mainPic);

                upload.render({
                  elem: '#mainPic' //绑定元素
                  , url: '/wares/mainPic' //上传接口
                  , done: function (res) {
                    if (res.code == 0) {
                      $("#mainPicAddress").val(res.data.mainPic);
                      $("#mainPic").attr("src", res.data.mainPic);
                    }
                  }
                  , error: function () {
                    //请求异常回调
                  }
                });
           });
          });
        });
      }
      else if (obj.event === 'attachment') {//点击附件管理时
        //先查询有没有上传过附件
        $.get("/wares/selectAvatars?pid="+obj.data.id,function (res){
            layer.open({
              type : 1,
              title : "多附件上传",
              area : [ "600px", "400px" ],
              content : $("#attachmentForm").html()
            });
           deleteIcon(res);
            var ids="";
            upload.render({
              elem: '#test2'
              ,url: '/attachment/avatar' //此处配置你自己的上传接口即可
              ,multiple: true
              ,before: function(obj){
              }
              ,done: function(res){
                  if(ids!==""){
                    ids +=",";
                  }
                ids +=res.data.id;
              },
              allDone:function(res) {
                //都上传成功之后，统一进行上传
                $.post("/wares/attachments?ids="+ids + "&&id="+obj.data.id,function (res){
                  //为新上传的图片加删除图标和事件
                  deleteIcon(res);
                  layer.msg("已经成功上传"+res.length+"张图片")
                });
              }
            });
        });
      }
    });
    $("body").on("click","#savePicBtn",function (){
      layer.closeAll();
    });

  });
</script>

</body>
</html>